<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .rili {
            width: 280px;
        }

        span {
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            display: inline-block;
            position: relative;
        }

        em {
            font-size: 12px;
            display: block;
            position: absolute;
            top: 25px;
            line-height: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
    <form action="" enctype=""></form>
    <script>
        // 闰年返回true 平年返回false
        function isRunnian(year) {
            if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
                return true;
            }
            return false;
        }
        /**
         * 判断月份
         * @param number year 年
         * @param number month 月份
         */
        function getTianshu(year, month) {
            if (month == 2) { // 2月单独处理
                if (isRunnian(year)) {
                    return 29;
                }
                return 28;
            }
            if (month == 1 || month == 3 || month == 5
                || month == 7 || month == 8 || month == 10
                || month == 12) {
                return 31;
            }
            return 30;
        }
        // 打印节日
        function showJieri(month, date) {
            // 请在此处输出对应日期的节日信息
            if (month == 1 && date == 1) {
                document.write('<em>元旦</em>');
            } else if (month == 2 && date == 14) {
                document.write('<em>情人节</em>');
            } else if (month == 3) {
                if (date == 12) {
                    document.write('<em>植树节</em>');
                } else if (date == 8) {
                    document.write('<em>妇女节</em>');
                }
            } else if (month == 5 && date == 1) {
                document.write('<em>劳动节</em>');
            } else if (month == 5 && date == 4) {
                document.write('<em>青年节</em>');
            } else if (month == 6 && date == 1) {
                document.write('<em>儿童节</em>');
            } else if (month == 7 && date == 1) {
                document.write('<em>建党节</em>');
            } else if (month == 8 && date == 1) {
                document.write('<em>建军节</em>');
            } else if (month == 9 && date == 10) {
                document.write('<em>教师节</em>');
            } else if (month == 10 && date == 1) {
                document.write('<em>国庆节</em>');
            }
        }
        // 打印日历
        function printRili(year, month) {
            // 该月份最大的日期
            var maxDay = getTianshu(year, month);
            document.write('<div class="rili">');
            for (var day = 1; day <= maxDay; day++) {
                document.write('<span>' + day);
                showJieri(month, day);
                document.write('</span>')
            }
            document.write('</div>');
        }
        
        // 打印3月的日历
        printRili(2020,3);

        // for (var i = 1; i <= 12; i++) {
        // }
    </script>
</body>

</html>